<template>
  <li class='blog-card'>
    <p class='c-img'>
      <a href='javascript:void(0);' @click='select'>
        <img href='#' :src='imgUrl()' :class='clazz' />
      </a>
    </p>
    <div class='c-content'>
      <h3 class='c-title tl' @click='select'>
        <a href='javascript:void(0);' class='title-text'>
          <span>{{ blog.title }}</span>
        </a>
      </h3>
      <p class='tl text'>{{ blog.description }}</p>
    </div>
    <p class='footer tl pl5 pr5'>
      <el-icon :size='13' class='f-icon'>
        <alarm-clock />
      </el-icon>
      {{ blog.update_date }}
      <el-icon :size='13' class='f-icon ml10'>
        <View />
      </el-icon>
      浏览({{ 20 }})
      <a class='link fr mr10 f12' @click='select'>阅读原文 >></a>
    </p>
    <p class='line'></p>
  </li>
</template>

<script>
import { defineComponent, computed, ref } from "vue";
import { useRouter, useRoute, routeent } from "vue-router";
import { AlarmClock, View } from "@element-plus/icons";
import { stringify } from "qs";
import format from "@/utils/date-fmt.js";
export default {
  name: "blog-card-small",
  props: {
    blog: Object,
  },
  setup (props) {
    const blog = props.blog;
    blog.date = format(new Date(blog.update_date || ''))
    const clazz = ref('');
    let icons = blog.sfilesIcon;
    clazz.value = icons && icons.length > 0 ? "icon-scale" : "icon-origin";
    const imgUrl = () => {
      let hash = window.location.hash;

      if (icons && icons.length > 0)      {
        return window.location.origin + `/bgmg/blog/detail/${blog._id}/imageicons/${icons[0].name}`
      }
      return require("../../assets/imgs/bird/bird-c1.png");
    };

    const router = useRouter();
    const route = useRoute();
    const select = () => {
      router.push({
        name: "detail",
        query: { id: blog._id, type: blog.file.type },
        params: { title: blog.title },
      });
    };
    return {
      blog,
      select,
      imgUrl,
      clazz
    };
  },
  components: {
    AlarmClock,
    View,
  },
};
</script>

<style lang="scss" scoped>
.blog-card {
  border-bottom: #ccc 1px solid;
  margin: 10px 5px;
  overflow: hidden;
}
h3.c-title {
  line-height: 25px;
  height: 25px;
  padding: 5px 0;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  color: #555;
}
.title-text {
  text-decoration: none;
  color: #555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inherit;
}
.c-title .block {
  background: #333;
  padding: 2px 5px;
  font-size: 14px;
  color: #fff;
  border-radius: 2px;
  position: relative;
  margin-right: 20px;
}
.c-title .block::after {
  content: "";
  width: 0px;
  height: 0px;
  border-top-width: 6px;
  border-top-style: solid;
  border-top-color: transparent;
  border-left-width: 6px;
  border-left-style: solid;
  border-left-color: #333;
  border-bottom-width: 6px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
  margin: 0px;
  padding: 0px;
  position: absolute;
  right: -6px;
  top: 4px;
}
.c-img {
  display: block;
  float: left;
  // height: 100%;
  overflow: hidden;
  border-radius: 4px;
  margin-right: 15px;
  height: 105px;
  width: 160px;
  // background-color: #fff9c4;
}
.c-img img {
  transition: all 0.5s ease-in;
}
.c-img img.icon-scale {
  width: 60%;
}
.c-img img.icon-origin {
  width: 100%;
}
.c-img:hover img {
  transform: scale(1.2);
}
.text {
  color: #888;
  // display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.footer {
  width: 100%;
  overflow: hidden;
  clear: both;
  margin: 15px 0 0 0;
  display: inline-block;
  color: #838383;
  font-size: 12px;
}
.footer .link {
  cursor: pointer;
  color: #1abc9c;
  font-weight: bolder;
}
.footer .f-icon {
  vertical-align: bottom;
}
li.blog-card .line {
  width: 0px;
  height: 2px;
  background: #333;
  -moz-transition: all 3s ease;
  -webkit-transition: all 3s ease;
  transition: all 1.5s ease;
}
li.blog-card:hover .line {
  width: 100%;
}
</style>
